<template>
  <div class="container clearfix"
       :class="{
                'super-vip-bg':card_data.card_type==0||card_data.card_type==5,
                'project-bg':card_data.card_type==1,
                'friends-bg':card_data.card_type==2,
                'partner-bg':card_data.card_type==3,
                'black-gold-bg':card_data.card_type==4
                }">
    <div class="card clearfix"
         :class="{
                'super-vip':card_data.card_type==0||card_data.card_type==5,
                'project':card_data.card_type==1,
                'friends':card_data.card_type==2,
                'partner':card_data.card_type==3,
                'black-gold':card_data.card_type==4
                }">
      <div class="title">
        <div class="msg">
          {{card_data.card_type==0||card_data.card_type==5?'超级会员卡':''}}
          {{card_data.card_type==1?'项目卡':''}}
          {{card_data.card_type==2?'亲友卡':''}}
          {{card_data.card_type==3?'加盟卡':''}}
          {{card_data.card_type==4?'黑金卡':''}}
        </div>
        <div class="line"></div>
        <div class="logo">
          <img :src="base_url+'/mp_2.4/card/logo.png'"
               v-if="base_url"
               mode="widthFix"
               alt=""
               class="img">
        </div>
      </div>
      <div class="price">
        <div class="icon">￥</div>
        <div class="num">{{card_data.price}}</div>
      </div>
      <div class="card-id">
        消费码：{{card_data.code}}
      </div>
    </div>
    <div class="card-detail">
      <scroll-view :scroll-y="true"
                   :style="{'height': '100%'}">
        <div class="title">
          卡券详情
        </div>
        <div class="send"
             v-if="card_data.is_give_card==1"
             @tap="send()">
          <div class="send-btn">
            转赠
          </div>
        </div>
        <ul class="project-list">
          <li class="list-item"
              v-for="(item, index) in card_data.butler_project"
              :key="index"
              @tap="booking(item)">
            <div class="pro-title clearfix">
              <div class="msg">
                {{item.project}}
              </div>
              <div class="icon"
                   v-if="item.project_status==0">
                <img :src="base_url+'/jifenshangcheng/xiangqingye/xiayibu@2x.png'"
                     v-if="base_url"
                     mode="widthFix"
                     class="img">
              </div>
            </div>
            <div class="pro-time clearfix">
              <div class="date">
                {{item.end_time}}前有效
              </div>
              <div class="status"
                   v-if="item.project_status>0"
                   :class="{'red-txt':item.project_status==1||item.project_status==4||item.project_status==5}">
                {{item.project_status==1?'正在预约':''}}
                {{item.project_status==2?'已过期':''}}
                {{item.project_status==3?'已使用':''}}
                {{item.project_status==4?'已逾期请重新选择时间':''}}
                {{item.project_status==5?'待领取':''}}
                {{item.project_status==6?'已领取':''}}
              </div>
            </div>
          </li>
        </ul>
        <div class="notice">
          <div class="notice-title">
            卡券说明：
          </div>
          <div class="msg">
            {{card_data.detail||""}} </div>
        </div>
      </scroll-view>
    </div>
    <div class="form-mask"
         v-if="show_form"
         @tap="close_form()">
      <div class="form clearfix"
           @tap.stop="stay_form()">
        <div class="title">转赠</div>
        <div class="inp-box">
          <input type="number"
                 class="inp"
                 placeholder="请输入手机号"
                 v-model="user_tel"
                 @input="check_user()"
                 maxlength="11">
          <div class="tel-icon">
            <img :src="base_url+'/mp_2.5/shouji@2x.png'"
                 v-if="base_url"
                 alt=""
                 class="img">
          </div>
          <div class="clear-icon"
               v-if="user_tel!=''"
               @tap.prevent="clear_inp()">
            <img :src="base_url+'/mp_2.5/icon_registration_clear@2x.png'"
                 v-if="base_url"
                 alt=""
                 class="img">
          </div>
        </div>
        <div class="tip"
             v-if="tip_msg!=''">
          *{{tip_msg}}
        </div>
        <div class="user-logo"
             v-if="user_data.headimgurl">
          <img :src="img_url+user_data.headimgurl"
               v-if="img_url&&user_data.headimgurl"
               mode="widthFix"
               alt=""
               class="img">
        </div>
        <div class="user-nick"
             v-if="user_data.realname">
          {{user_data.realname}}
        </div>
        <div class="btn"
             @tap.stop="sub_form()">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      card_id: "",
      card_data: {},
      user_tel: "",
      user_data: {},
      tip_msg: "",
      show_form: false
    };
  },
  onLoad (options) {
    if (options.id) {
      this.card_id = options.id
    }
  },
  onShow () {
    this.get_data()
  },
  methods: {
    get_data () {
      common.fly_post("api/v4_2/card_ticket/details", {
        id: this.card_id
      }, response => {
        let res = response.data
        if (res.status_code == '0') {
          if (res.data.butler_project.length > 0) {
            res.data.butler_project.forEach(item => {
              item.end_time = new Date(item.project_expirce_time * 1000).Format('yyyy-MM-dd')
            });
          }
          this.card_data = res.data
        }
      })
    },
    send () {
      this.show_form = true
    },
    clear_inp () {
      this.user_tel = ""
      this.tip_msg = ""
      this.user_data = {}
    },
    check_user () {
      this.user_data = {}
      this.tip_msg = ""
      if (this.user_tel.trim().length == 11) {
        common.fly_post('api/v4_2/card_ticket/give_card_user', {
          phone: this.user_tel
        }, response => {
          let res = response.data
          if (res.status_code == '0') {
            switch (res.data.status) {
              case 0:
                this.tip_msg = '手机号未注册'
                break;
              case 1:
                this.tip_msg = '手机号格式错误'
                break;
              case 2:
                this.user_data = res.data.user_info
                break;
              default:
                break;
            }


          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: 'none', //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        })
      }
    },
    sub_form () {
      if (this.user_tel.trim() == "") {
        wx.showToast({
          title: '请输入手机号', //提示的内容,
          icon: 'none', //图标,
          duration: 1000, //延迟时间,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
      } else {
        common.fly_post('api/v4_2/card_ticket/submit_give_card', {
          code_id: this.card_id,
          phone: this.user_tel
        }, result => {
          let res = result.data
          if (res.status_code == '0') {
            this.show_form = false
            wx.showToast({
              title: '转赠成功', //提示的内容,
              icon: 'none', //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {
                this.show_form = false
                this.user_tel = ""
                this.user_data = {}
                setTimeout(() => {
                  wx.navigateBack({
                    delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                  });
                }, 1500);
              }
            });
          } else {
            this.show_form = false
            this.user_tel = ""
            this.user_data = {}
            this.tip_msg = ""
            wx.showToast({
              title: res.message, //提示的内容,
              icon: 'none', //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        })
      }
    },
    close_form () {
      this.show_form = false
      this.user_data = {}
      this.tip_msg = ""
      this.user_tel = ""

    },
    stay_form () {
      return false
    },
    booking (item) {
      if (item.project_status == 0 || item.project_status == 1 || item.project_status == 4 || item.project_status == 5) {
        // 未使用或者正在预约
        switch (item.type) {
          case 0:
            // 普通项目
            wx.navigateTo({
              url: `/pages/package_projects/confirm_bookform/main?card_tid=${this.card_data.tid}&card_id=${this.card_id}&project_id=${item.id}&project_status=${item.project_status}&last_time=${item.last_time}`
            });
            break;
          case 1:
            // 面膜领取
            wx.navigateTo({
              url: `/pages/package_projects/receive_form/main?card_tid=${this.card_data.tid}&card_id=${this.card_id}&project_id=${item.id}&project_status=${item.project_status}&last_time=${item.last_time}`
            });
            break;
          default:
            break;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: rgba(243, 244, 246, 1);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  position: relative;
  .card {
    height: 184px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 36px;
    position: relative;
    padding: 0 15px;
    .title {
      margin-top: 16px;
      .msg {
        font-size: 22px;
        font-family: "PingFangSC-Medium";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        display: inline-block;
        vertical-align: middle;
      }
      .line {
        width: 1px;
        height: 18px;
        background: rgba(255, 255, 255, 1);
        opacity: 0.6022;
        display: inline-block;
        vertical-align: middle;
        margin: 0 10px;
      }
      .logo {
        width: 67px;
        display: inline-block;
        vertical-align: middle;
        .img {
          width: 100%;
          margin-top: 5.5px;
        }
      }
    }
    .price {
      margin-top: 10px;
      .icon {
        font-size: 17px;
        font-family: "PingFangSC-Medium";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        display: inline-block;
        vertical-align: baseline;
        line-height: 30px;
        margin-right: 2px;
      }
      .num {
        font-size: 25px;
        font-family: "PingFangSC-Medium";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        display: inline-block;
        margin-left: -4px;
        vertical-align: baseline;
      }
    }
    .card-id {
      height: 15px;
      width: 91%;
      position: absolute;
      bottom: 8px;
      font-size: 12px;
      box-sizing: border-box;
      font-family: "PingFangSC-Medium";
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      padding-left: 22px;
      line-height: 11px;
      background-position: bottom left;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/xiaofeima.png);
    }
    //   项目卡
    &.project {
      background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/xiangmuka.png);
    }
    //   亲友卡
    &.friends {
      background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/qinyouka.png);
    }
    //   加盟卡
    &.partner {
      background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/jiamemgka.png);
    }
    //   超级会员卡
    &.super-vip {
      background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/chaoji.png);
    }
    //   黑金卡
    &.black-gold {
      background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/heijin.png);
      .title {
        .msg {
          font-size: 22px;
          font-family: "PingFangSC-Medium";
          font-weight: 500;
          color: rgba(219, 177, 120, 1);
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
  .card-detail {
    width: 345px;
    flex: 1;
    background: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-radius: 6px;
    margin: 10px auto;
    padding: 15px;
    overflow: hidden;
    .title {
      font-size: 16px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
    .send {
      border-left: 1px dashed rgba(151, 151, 151, 1);
      position: absolute;
      top: 0px;
      right: 0px;
      .send-btn {
        width: 48px;
        height: 21px;
        background: rgba(252, 115, 114, 1);
        border-radius: 12px;
        line-height: 21px;
        text-align: center;
        font-size: 12px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        margin-left: 10px;
      }
    }
    .project-list {
      margin-top: 10px;
      .list-item {
        border-bottom: 1px solid rgba(237, 237, 237, 1);
        padding: 12px 0;
        .pro-title {
          .msg {
            font-size: 14px;
            font-family: " PingFangSC-Regular";
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            float: left;
            vertical-align: middle;
          }
          .icon {
            width: 20px;
            float: right;
            vertical-align: middle;
            .img {
              width: 100%;
            }
          }
        }
        .pro-time {
          .date {
            font-size: 12px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            float: left;
            vertical-align: middle;
          }
          .status {
            font-size: 12px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            float: right;
            vertical-align: middle;
            &.red-txt {
              color: rgba(255, 56, 62, 1);
            }
          }
        }
      }
    }
    .notice {
      display: flex;
      margin-top: 20px;
      .notice-title {
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
      .msg {
        flex: 1;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
  .form-mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    .form {
      width: 293px;
      background: rgba(255, 255, 255, 1);
      border-radius: 8px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 90;
      .title {
        font-size: 17px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-top: 20px;
        text-align: center;
      }
      .inp-box {
        width: 271px;
        height: 36px;
        margin: 15px auto 0;
        box-sizing: border-box;
        position: relative;
        .inp {
          width: 100%;
          height: 36px;
          background: rgba(216, 216, 216, 0.44189);
          border-radius: 21px;
          padding-left: 38px;
          box-sizing: border-box;
        }
        .tel-icon {
          width: 14px;
          height: 21px;
          position: absolute;
          left: 14px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 10;
          .img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .clear-icon {
          width: 16px;
          height: 16px;
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 10;
          .img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
      .tip {
        font-size: 12px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(255, 56, 62, 1);
        margin-left: 22px;
        margin-top: 5px;
      }
      .user-logo {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        margin: 15px auto 0;
        overflow: hidden;
        position: relative;
        .img {
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .user-nick {
        font-size: 17px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin: 10px auto 0;
        text-align: center;
      }
      .btn {
        width: 134px;
        height: 36px;
        background: rgba(255, 56, 62, 1);
        border-radius: 20px;
        line-height: 36px;
        text-align: center;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        margin: 20px auto 15px;
      }
    }
  }
  //   项目卡 -- 背景
  &.project-bg {
    background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/xiangmu@2x.png);
  }
  //   亲友卡 -- 背景
  &.friends-bg {
    background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/qinyou@2x.png);
  }
  //   加盟卡 -- 背景
  &.partner-bg {
    background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/jiameng@2x.png);
  }
  //   超级会员卡 -- 背景
  &.super-vip-bg {
    background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/chaoji@2x.png);
  }
  //   黑金卡 -- 背景
  &.black-gold-bg {
    background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/heijin@2x.png);
  }
}
</style>


